<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="22" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="22" color="#333333"></uni-icons>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @tap="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-bar-title">我的收藏</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 收藏列表 -->
    <scroll-view scroll-y class="favorites-scroll">
      <view class="favorites-list">
        <view v-for="dish in favoriteDishes" :key="dish.id" class="favorite-item">
          <image :src="dish.image" mode="aspectFill" class="dish-image"></image>
          <view class="dish-info">
            <view class="dish-header">
              <text class="dish-name">{{ dish.name }}</text>
              <uni-icons type="heart-filled" size="24" color="#FF5252" @tap="deleteFavorite(dish)"></uni-icons>
            </view>
            <text class="dish-desc">{{ dish.description }}</text>
            <view class="dish-footer">
              <text class="dish-price">¥{{ dish.price }}</text>
              <button class="order-btn" @tap="goToOrder(dish)">去点餐</button>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="favoriteDishes.length === 0" class="empty-favorites">
          <uni-icons type="star" size="64" color="#ddd"></uni-icons>
          <text class="empty-text">暂无收藏的菜品</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 收藏的菜品数据
const favoriteDishes = ref([
  {
    id: 1,
    name: '北京烤鸭',
    description: '精选优质鸭肉，传统工艺烤制，外酥里嫩',
    price: 198,
    image: 'https://p9-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/31e44832a9c645df913ec4299773a51a.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850158&x-signature=J52YknSQKiBo2bPtj6kedWUQkK8%3D'
  },
  {
    id: 2,
    name: '麻婆豆腐',
    description: '嫩滑豆腐配以香辣酱料，麻辣鲜香',
    price: 48,
    image: 'https://p26-bot-workflow-sign.byteimg.com/tos-cn-i-mdko3gqilj/38148bf503e7494cbf4a4e1c4115bc03.png~tplv-mdko3gqilj-image.png?rk3s=c8fe7ad5&x-expires=1773850697&x-signature=ciyEP%2BdtyeM2IO6dhTfJUdxboyw%3D'
  }
]);

// 删除收藏
const deleteFavorite = (dish: any) => {
  uni.showModal({
    title: '取消收藏',
    content: `确定要取消收藏"${dish.name}"吗？`,
    success: (res) => {
      if (res.confirm) {
        favoriteDishes.value = favoriteDishes.value.filter(item => item.id !== dish.id);
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        });
      }
    }
  });
};

// 前往点餐页面
const goToOrder = (dish) => {
  uni.switchTab({
    url: '/pages/menu/index'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 101;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: sticky;
  top: 44px;
  z-index: 100;
}

.nav-bar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.nav-bar-right {
  width: 80rpx;
}

.favorites-scroll {
  flex: 1;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.favorites-list {
  padding-bottom: 30rpx;
  width: 100%;
}

.favorite-item {
  display: flex;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  min-height: 200rpx;
  position: relative;
}

.dish-image {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  margin: 0;
}

.dish-info {
  flex: 1;
  min-width: 0;
  margin-left: 200rpx;
  padding: 20rpx;
  padding-right: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.dish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
  width: 100%;
}

.dish-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  max-width: 70%;
}

.dish-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dish-price {
  font-size: 32rpx;
  color: vars.$primary-color;
  font-weight: 500;
}

.order-btn {
  background-color: vars.$primary-color;
  color: #fff;
  font-size: 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 30rpx;
  border-radius: 30rpx;
  margin: 0;
  white-space: nowrap;
}

.empty-favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
</style> 